import React, { useState } from "react";
import { Route, Link, useHistory } from 'react-router-dom'
import logo from "./img/redlogo.jpg";
import seachImg from "./img/206搜索.png";
import Rednav from "./css/Rednav.module.css";
import OldCss from "./css/search.module.css";//搜索框的css
// 默认
import defaultHead from './img/head2.png'
import Personal from "./personal";

function Total() {
    // 判断是否登录了
    let isLogin = window.localStorage.getItem("isLogin")
    let history = useHistory();
    function toLogin() {
        history.push({ pathname: "/login", state: {} });
    }
    function toRegister() {
        history.push({ pathname: "/register", state: {} });
    }
    function toHome() {
        history.push({ pathname: "/", state: {} });

    }
    function toExperience() {
        history.push({ pathname: "/experience", state: {} });

    }
    const [isShowPersonalBox, setisShowPersonalBox] = useState(false)
    // 显示个人信息框
    function ShowPersonalBox() {
        setisShowPersonalBox(true);
        console.log(isShowPersonalBox, "isShowPersonalBox");
    }
    // 隐藏个人信息框
    function hiddenPersonalBox() {
        setisShowPersonalBox(false);

    }
    function inputEvent() {
        // 搜索框的点击事件：实现把搜索框变长，同时显示下方的信息展示框

    }
    return (
        <div>
            <div className={Rednav.NavBox}>
                <div className={Rednav.NavContent}>
                    {/* 左边logo */}
                    <div className={Rednav.leftBox}>
                        <img src={logo} onClick={toHome} alt="" />
                    </div>
                    {/* 中间content 搜索框*/}
                    <div className={Rednav.contentBox}>
                        {/* <div className={this.state.clickCss ? "" : OldCss.searchBox}> */}
                        <div className={OldCss.searchBox}>
                            <span className={Rednav.seachImgLabelBox}>
                                <img className={Rednav.seachImgLabel} src={seachImg} alt="" />
                            </span>
                            <input onClick={inputEvent} type="text" className={Rednav.searchInput} placeholder='任何目的地 · 房源' />
                        </div>
                    </div>
                    {/* 右边logo */}
                    <div className={Rednav.rightBox}>
                        <div className={Rednav.rightContentBox}>
                            <ul className={Rednav.navUl}>
                                <li>
                                    <span></span>
                                    简体中文(CN)
                                </li>
                                <li>
                                    ￥CNY
                                </li>
                                <li>
                                    手机端
                                </li>
                                <li>出租房源</li>
                                <li onClick={toExperience}>开展体验</li>
                                <li>历史足迹</li>
                                <li>帮助</li>
                                <li className={isLogin ? Rednav.HeadImgs : Rednav.hiddenHead}>
                                    <div className={isLogin ? Rednav.HeadImg : Rednav.hiddenHead}>
                                        <img src={defaultHead} onClick={ShowPersonalBox} className={Rednav.Titleimg} alt="" />
                                        <div onMouseOut={hiddenPersonalBox} onMouseOver={ShowPersonalBox} className={isShowPersonalBox ? Rednav.ShowPersonalBox : Rednav.HiddenPersonalBox}>
                                            <Personal />
                                        </div>
                                    </div>
                                </li>
                                <li className={isLogin ? Rednav.hiddenRegister_Login : Rednav.dispalyRegister_Login} onClick={toRegister}>注册</li>
                                <li className={isLogin ? Rednav.hiddenRegister_Login : Rednav.dispalyRegister_Login} onClick={toLogin}>登录</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )
}



export default Total;
